<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>专题</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css?v=6" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
	<script src="js/config.js"></script>
	<script src="js/jquery-1.8.1.min.js"></script>
	<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	<script src="js/component.js?v=78"></script>
	<script src="js/navbar-component.js?v=2"></script>
	<script src="https://unpkg.zhimg.com/vue-router@3.4.9/dist/vue-router.js"></script>
</head>

<body>
	<div id="app" v-cloak>
		<nav-top-bar linktitle="专题"></nav-top-bar>
		<!-- <div class="zhuanti-video">
			<video x5-playsinline="" playsinline="" x-webkit-airplay="allow" style="object-fit:fill" id="video" controls
				preload="auto" width="100%" :src="videoUrl">
			</video>
		</div> -->
		<div class="zhuanti-cover">
			<img :src="data.cover_url" />
		</div>
		<div class="zhuanti-wrapper">
			<div class="zhuanti-nav">
				<span v-bind:class="tab == 2? 'zhuanti-nav-cell on':'zhuanti-nav-cell'" @click="switchTab(2)">介绍</span>
				<span v-bind:class="tab == 1? 'zhuanti-nav-cell on':'zhuanti-nav-cell'" @click="switchTab(1)">目录</span>
				<span v-bind:class="tab == 3? 'zhuanti-nav-cell on':'zhuanti-nav-cell'" @click="switchTab(3)">评论</span>
			</div>
			<div class="zhuantimulu_cont" v-if="tab == 1">
				<div class="mulu-total" style="display: flex;justify-content: space-between;padding-right:0.28rem;">
					<div class="total-left">共{{data.sub.length}}讲</div>
					<div class="total-right">
						<img @click="changeSort" src="img/shipinxuexi/sort.png" style="width:0.28rem;height:0.28rem;"/>
					</div>
				</div>
				<ul class="mulu-shipin">
					<li v-for="(item,index) in data.sub" v-bind:key="index" @click="goVideoStudy(item)">
						<div class="shipin-title">{{sort == 'asc'?(index+1):(data.sub.length-index)}}.{{item.title}}</div>
						<div class="shipin-time d-f a-c-c j-c-s">
							<div class="time-box d-f a-c-c">
								<img src="img/index/icon_zhuanti_ship.png" class="shipin-icon" />
								时长{{ durationFormat(item.duration) }} <span style="display: inline-block;margin-left:5px;color:#33CC66;" v-if="item.is_free">免费试看</span>
								
							</div>
							<div class="bofang-statu">已观看{{ item.progress }}%</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="zhuantimulu_cont" v-if="tab == 2">
				<div :class="{tixing:true,opened:isRemain}">
					<img src="img/index/icon_zhuanti_tixing.png" class="tixing-icon" />
					<span v-if="!isRemain" class="d-f flex1">开启上新提醒，有新课上架时将通知您</span>
					<span v-else class="d-f flex1">已经开启上新提醒</span>
					<span v-if="!isRemain" class="tixing-btn" @click="openRemind">立即开启</span>
					<span v-else class="tixing-btn" @click="closeRemind">立即隐藏</span>
				</div>
				<div class="zhuantimulu-xq">
					<p class="zhuantimulu-xq-title">{{data.title}}</p>
					<p class="zhuantimulu-xq-renshu">{{data.total_user}}人学习</p>
					<div class="zhuantimulu-xq-money">
						<span>¥{{ data.fee }}</span>
						<span class="zk-label">会员免费</span>
					</div>
					<div class="total-title">共{{data.sub.length}}讲</div>
					<div class="zhuanti-jieshao" style="padding:20px;" v-html="data.desc"></div>
				</div>
			</div>
			<div class="zhuantimulu_cont" v-if="tab == 3">
				<div class="touxuefasheng-cells">
					<div class="touxuefasheng-cell d-f a-c-c" v-for="item in commentList">
							<img :src="item.user.avatar_url" class="touxue-toux" />
							<div class="touxuefasheng-xq">
									<p class="tongxue-name">
											{{ item.user.nick_name }}
											<span class="plsj">{{item.create_time}}</span>
									</p>
									<div class="txfs-cell-foot">{{ item.note }}</div>
							</div>
					</div>
				</div>
			</div>
		</div>
		<div class="zhuanti-foot">
			<div v-if="isStar" style="display:flex;flex-direction:column;align-items:center;" @click="star"><img style="width:0.5rem;height:0.5rem;" src="img/more/icon_ship_shouc_pre.png" />收藏</div>
			<div v-else style="display:flex;flex-direction:column;align-items:center;" @click="star"><img style="width:0.5rem;height:0.5rem;" src="img/more/icon_ship_shouc.png" />收藏</div>
			<div style="display:flex;flex-direction:column;align-items:center;" @click="commentShow = true"><img style="width:0.55rem;height:0.55rem;" src="img/more/icon_ship_ping.png" />评论</div>
			<button class="zhuanti-foot-btn" v-if="studyPlanStatus" @click="goStudyPlan">查看我的学习计划</button>
			<button class="zhuanti-foot-btn" v-else @click="addStudyPlan">加入我的学习计划</button>
		</div>

		<!-- 专题目录弹框 -->
		<div class="likePop" v-if="showBuy">
			<div class="pop-mask" @click="showBuy=false"></div>
			<div class="likeCont">
				<p class="likeCont-text">立即购买课程？</p>
				<div class="like-foot">
					<button class="like-foot-btn buy-foot-btn" @click="goVip()">购买VIP</button>
					<button class="like-foot-btn like-btn-ljsz" @click="buy()">购买专栏</button>
				</div>
			</div>
		</div>
		<!-- 通用toast弹窗 -->
		<div class="toast" v-show="toastShow">
			{{toastText}}
		</div>

		<div class="tongxuefasheng" v-show="commentShow">
			<div class="pop-mask" @click="commentShow = false"></div>
			<div class="tongxuefasheng-cont">
				
					<div class="liuyan-foot d-f a-c-c">
							<input type="text" maxlength="200" class="liuyan-input flex1" v-model="comment" />
							<span class="send" @click="sendComment">发送</span>
					</div>
			</div>
		</div>

	</div>
</body>
<script>
	var router = new VueRouter({
		mode: 'history'
	})
	var vue = new Vue({
		el: "#app",
		router,
		data() {
			return {
				data: {
					sub: []
				},
				id: 0,
				tab: 2,
				studyPlanStatus: false,

				videoUrl: '',

				toastText: '',
				toastShow: false,

				showBuy: false,
				isRemain:0,//是否已经开启提醒
				sort:'asc',
				isStar:0,

				comment:'',//评论的内容
				commentShow:false,
				commentQuery:{
					page:1,
				},
				commentList:[]
			}
		},
		created() {
			this.id = this.$route.query.id;
			this.getSort()
			this.getTopic();
			this.checkIsRemind()
			this.checkIsStar()
			this.getComment()
		},
		methods: {
			getTopic() {
				axios.get('/mp/topic/getTopic/id/' + this.id + "&sort="+this.sort).then(res => {
					this.data = res.data;
					// if (this.data.video_desc_id) {
					// this.getVideoInfo(this.data.video_desc_id);
					// };
					this.getStudyPlan();
				});
			},
			getStudyPlan() {
				axios.get('/mp/studyPlan/get', { params: { src_id: this.id, type: 2 } }).then(res => {
					if (1 === res.data.code) {
						this.studyPlanStatus = res.data.data;
					} else {
						this.toast(res.data.msg);
					}
				});
			},
			getVideoInfo(video_desc_id) {
				axios.post('/mp/video/videoInfoByOutId', { outId: video_desc_id }).then(res => {
					this.videoUrl = res.data.PlayInfoList['PlayInfo'][0]['PlayURL'];
					this.coverUrl = res.data.VideoBase['CoverURL'];
				}).catch(e => {
					this.toast('视频信息获取失败', 10000);
				});
			},
			switchTab(tab) {
				this.tab = tab
			},
			addStudyPlan() {
				axios.get('/mp/studyPlan/add', { params: { src_id: this.id, type: 2 } }).then(res => {
					if (1 === res.data.code) {
						if (res.data.data) {
							this.studyPlanStatus = true;
							this.toast('加入成功');
						} else {
							this.showBuy = true;
						}
					} else {
						this.toast(res.data.msg);
					}
				});
			},
			goVideoStudy(item) {				
				if (this.studyPlanStatus || item.is_free) {
					window.location.href = "/shipinxuexi.html?id=" + item.id;
				} else {
					this.toast('请先添加到学习计划');
				}
			},
			goStudyPlan() {
				window.location.href = "/xuexi.html";
			},
			goVip() {
				window.location.href = "/VIP.html";
			},
			toast(message, time = 3000) {
				this.toastText = message;
				this.toastShow = true;
				setTimeout(() => {
					this.toastShow = false;
				}, time);
			},
			durationFormat(second) {
				let time = '';
				if (second > 3600) {
					// 超过1小时
					time = parseInt(second / 3600) + ':';
					second = second % 3600;
				}
				return time + parseInt(second / 60) + ':' + parseInt(second % 60);
			},
			buy() {
				this.showBuy = false;
				axios.post('/mp/order/order', { id: this.id, type: 'topic' }).then(e => {
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": e.data.appId,
						"nonceStr": e.data.nonceStr,
						"package": e.data.package,
						"paySign": e.data.paySign,
						"signType": e.data.signType,
						"timeStamp": e.data.timeStamp,
					}, (res) => {
						switch (res.err_msg) {
							case 'get_brand_wcpay_request:cancel':
								// alert('用户取消支付！');
								break;
							case 'get_brand_wcpay_request:fail':
								// alert('支付失败！（' + res.err_desc + '）');
								break;
							case 'get_brand_wcpay_request:ok':
								// alert('支付成功！');
								this.addStudyPlan();
								break;
							default:
								// console.log(JSON.stringify(res));
								// alert(JSON.stringify(res));
								break;
						}
					});
				});
			},
			openRemind(){
				axios.get('/mp/topic/openRemind',{ params: { id:this.id} }).then(res=>{
					alert("设置成功")
				},r=>{
					alert(r.response.data) 
					console.log(r.response.data)
				})
			},
			closeRemind(){
				axios.get("/mp/topic/closeRemind",{params:{id:this.id}}).then(res=>{
					alert("隐藏成功")
				},r=>{})				
			},	
			checkIsRemind(){
				axios.get('/mp/topic/isRemind',{params: {id:this.id}}).then(res=>{					
					this.isRemain = res.data.isRemain					
				},r=>{
					console.log(r.response.data)
				})
			},
			checkIsStar(){
				axios.get('/mp/topic/isStar',{params:{id:this.id}}).then(res=>{
					this.isStar = res.data.isStar
				},r=>{
					console.log(r.response.data)
				})
			},
			star(){
				axios.get('/mp/topic/star',{params:{id:this.id}}).then(res=>{
					this.isStar = res.data.isStar
					this.checkIsStar()
				},r=>{
					alert(r.response.data)					
				})
			},
			sendComment(){
				if(this.comment.length < 3){
					alert("请输入至少3个字")
					return
				}
				let data = {
					'note':this.comment,
					'topic_id':this.id,
				};
				axios.post("/mp/topic/comment",data).then(res=>{
					console.log("评论成功")
					this.commentShow = false
					this.commentQuery.page = 1
					this.commentList = []
					this.getComment()
				},r=>{
					console.log(r.response.data)	
				})
			},
			getComment(){
				this.commentQuery.id = this.id
				axios.get("/mp/topic/getComment",{params:this.commentQuery}).then(res=>{
					if(res.data.length > 0){
						this.commentList = this.commentList.concat(res.data)
					}
					console.log(res.data,'comment')
				})
			},
			changeSort(){
				let sort = localStorage.getItem("sort")
				if(!sort || sort == 'desc'){
					sort = 'asc'
				}else{
					sort = 'desc'
				}
				this.sort = sort
				localStorage.setItem("sort",sort)
				this.getTopic()
			},
			getSort(){
				let sort = localStorage.getItem("sort")
				if(sort) {
					this.sort = sort;
				} else {
					this.sort = 'asc'
				}
			}
		}
	})
</script>

</html>